<%--
  Created by IntelliJ IDEA.
  User: 33220
  Date: 2019/8/8
  Time: 19:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CustomerList</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- bootstrap-table -->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
    <!-- 引入中文语言包 -->
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading text-center">
            <h2>客户信息列表</h2>
        </div>
        <div class="panel-body">
            <table id="table" class="table table-bordered table-striped"></table>
            <table id="table2" class="table table-bordered table-striped"></table>
        </div>
    </div>
</div>

<%--将${pageContext.request.contextPath}传递到js--%>
<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}"/>

<script>
    $('#table').bootstrapTable({
        pagination: true,  //开启分页
        pageNumber: 1,  //初始化的页码数
        pageSize: 5,  //初始化的分页大小
        pageList: [5, 10, 15, 25, 50, 100],  //可选择的分页大小
        paginationLoop: false,  //关闭分页条无线循环功能
        search: true,  //开启搜索
        showSearchButton: true,  //显示搜索按钮
        columns: [{
            field: 'id',
            title: 'ID'
        }, {
            field: 'name',
            title: '姓名'
        }, {
            field: 'gender',
            title: '性别'
        }, {
            field: 'age',
            title: '年龄'
        }, {
            field: 'phone',
            title: '手机'
        }, {
            field: 'email',
            title: '邮箱'
        }, {
            field: 'job',
            title: '职业'
        }, {
            field: 'level',
            title: '会员等级'
        }, {
            field: 'address',
            title: '地址'
        }],
        url: $("#PageContext").val() + '/lar/getAllCustomer'
    });

    $('#table2').bootstrapTable({
        pagination: true,  //开启分页
        pageNumber: 1,  //初始化的页码数
        pageSize: 5,  //初始化的分页大小
        pageList: [5, 10, 15, 25, 50, 100],  //可选择的分页大小
        paginationLoop: false,  //关闭分页条无线循环功能
        sidePagination: 'server',  //服务器端分页
        search: true,  //开启搜索
        showSearchButton: true,  //显示搜索按钮
        columns: [{
            field: 'id',
            title: 'ID'
        }, {
            field: 'name',
            title: '姓名'
        }, {
            field: 'gender',
            title: '性别'
        }, {
            field: 'age',
            title: '年龄'
        }, {
            field: 'phone',
            title: '手机'
        }, {
            field: 'email',
            title: '邮箱'
        }, {
            field: 'job',
            title: '职业'
        }, {
            field: 'level',
            title: '会员等级'
        }, {
            field: 'address',
            title: '地址'
        }],
        url: $("#PageContext").val() + '/lar/getCustomerWithPage'
    })
</script>
</body>
</html>
